import React,{Component} from 'react';
import { 
    View, 
    Text, 
    Image, 
    StatusBar, 
    TouchableWithoutFeedback, 
    ScrollView, 
    WebView, 
    Animated, 
    Easing, 
    Button,
} from 'react-native';
import Header from './header/Header'
import Dialog from './dialog/index'
export default class AddAddress extends Component {
    constructor(props){
        super(props);
        this.state = {
            // showHide: false,
            showAlert: false,
            showConfirm: false,
            alertBackInfo: '',
            confirmBackInfo: '',
            // currentAlpha: 0,//标志位，记录当前value
            // currentSize: 0.3,//标志位，记录当前value
            // fadeAnim: new Animated.Value(0), //设置初始值
            // size: new Animated.Value(0.3), //设置初始值
        }
    }
    // 给webview传递数据
    sendMessage() {
        this.webview.postMessage('给webview传递数据,这是rn传到webview的数据！');
    }
    // 接收webview传递过来的数据
    getWebMess(e){
        alert(e.nativeEvent.data)
    }

    // showAlert() {
    //     let that = this;
    //     this.state.currentAlpha = this.state.currentAlpha == 0?1:0;
    //     this.state.currentSize = this.state.currentSize == 0.3?1:0.3;
    //    // 弹性动画
    //    // Animated.spring(
    //    //   this.state.size,//初始值
    //    //   {
    //    //      toValue: this.state.currentSize,
    //    //      duration: 500,
    //    //      easing: Easing.linear,
    //    //      // Animated.spring设置动画的弹性，数值越大弹性越大
    //    //      bounciness: 10
    //    //   }//结束值
    //    // ).start(() => this.showAlert());//开始

    //    //多个弹性动画同时开始
    //    const createAnimation = function (value, toValue) {
    //         return Animated.spring(
    //             value,
    //             {
    //                 toValue: toValue,
    //                 easing: Easing.linear,
    //                 bounciness: 10,
    //                 useNativeDriver: true
    //             }
    //         )
    //     }
    //     this.setState({
    //         showHide: true
    //     },function(){
    //         Animated.parallel([
    //             createAnimation(that.state.fadeAnim, that.state.currentAlpha),
    //             createAnimation(that.state.size, that.state.currentSize)       
    //             ]).start(()=>{
    //             // 当弹窗opacity为0时将整个弹窗隐藏
    //             if(that.state.currentAlpha == 0){
    //                 that.setState({showHide: false})
    //             }
    //             // that.showAlert()
    //         })
    //     })
    // }
     
    alertCallBack(){
        this.setState({
            showAlert: false,
            alertBackInfo: '点击了确定'
        });
    }

    confirmCallBack(index){
        let info = index == 0?'点击了确定':'点击了取消'
        this.setState({
            showConfirm: false,
            confirmBackInfo: info,
        });
    }
    
    lindf(){
        this.setState({
            showAlert: !this.state.showAlert
        })
    }

    lindf1(){
        this.setState({
            showConfirm: !this.state.showConfirm
        })
    }

    render() {
        const { params } = this.props.navigation.state;
        const {navigate,goBack,state} = this.props.navigation;
        return (
            <View style={{
                flex: 1,
                // paddingTop: barHeight, 
                backgroundColor: '#eaeaea'
            }}>
                <Header isShowBack={true} title='新增收货地址' goBack={goBack} />

                <Dialog 
                    // Dialog的类型
                    type='alert'
                    // 控制弹框的显示
                    show={this.state.showAlert}
                    content='林帅帅真酷！'
                    // 点击的回调
                    alertCallBack={this.alertCallBack.bind(this)}
                    confirmCallBack={this.confirmCallBack.bind(this)}
                    centerBtn='我知道了'
                />

                <Dialog 
                    // Dialog的类型
                    type='confirm'
                    // 控制弹框的显示
                    show={this.state.showConfirm}
                    // 弹框的内容
                    content='林帅帅真酷！'
                    // alert点击的回调
                    alertCallBack={this.alertCallBack.bind(this)}
                    // confirm点击的回调
                    confirmCallBack={this.confirmCallBack.bind(this)}
                    // 定义左右按钮的文字
                    leftBtn='取消'
                    rightBtn='确定'

                />

                <View style={{justifyContent: 'center', alignItems: 'center'}}>
                    <Text style={{fontSize: 20}}>show alert：{this.state.showAlert?'true':'false'}</Text>
                    <Text style={{fontSize: 20}}>alertCallBack：{this.state.alertBackInfo}</Text>
                    <Text style={{fontSize: 20}}>show confirm：{this.state.showConfirm?'true':'false'}</Text>
                    <Text style={{fontSize: 20}}>confirmCallBack：{this.state.confirmBackInfo}</Text>
                </View>

                <View style={{height: 100, position: 'absolute', left: 0, right: 0, bottom: 0, zIndex: 1, justifyContent: 'center', alignItems: 'center'}}>
                    <View style={{marginBottom: 15}}>
                        <Button 
                            title='显示alert'
                            onPress={()=>this.lindf()}
                        />
                    </View>
                    <View style={{marginBottom: 15}}>
                        <Button 
                            title='显示confirm'
                            onPress={()=>this.lindf1()}
                        />
                    </View>
                </View>
            </View>
        );
    }
}